<template>
  <div class="car-add">
    <el-form :inline="false" :model="store.params" :rules="rules" label-width="120px" class="clearfix" ref="ruleForm" >
      <div class="car-info-panel clearfix" style="padding-top:0px;">
        <div class="car-info-title">收购信息</div>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="所属市场："  prop="marketId" required>
            <el-select v-model="store.params.marketId" placeholder="请选择市场" style="width:100%;" filterable>
              <el-option v-for="(item,index) in store.marketOptions" :key="item.marketId" :value="item.marketId" :label="item.marketName" ></el-option>
            </el-select>
            <input type="hidden" name="marketId" v-model="store.params.marketId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="所属分店：" prop="shopId" required>
            <el-select v-model="store.params.shopId" placeholder="请选择店铺"  style="width:100%;" filterable>
              <el-option v-for="(item,index) in store.shopOptions" :key="item.shopId"  :label="item.shopName" :value="item.shopId"></el-option>
            </el-select>
            <input type="hidden" name="shopId" v-model="store.params.shopId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="所属区域：">
            <el-select v-model="store.params.regionId" placeholder="请选择区域" clearable style="width:100%;" filterable>
              <el-option v-for="(item,index) in store.regionOptions" :key="item.regionId"  :label="item.regionName" :value="item.regionId"></el-option>
            </el-select>
            <input type="hidden" name="regionId" v-model="store.params.regionId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24" :xl="24" >
          <el-form-item label="品　　牌：" prop="modelId" required>
            <el-select clearable v-model="store.params.brandId" placeholder="请选择品牌" clearable filterable>
              <el-option-group v-for="group in store.brandOptions" :key="group.initial" :label="group.initial">
                <el-option v-for="item in group.brandInfo" :key="item.brandId" :label="`${group.initial} - ${item.brandName}`" :value="item.brandId">
                </el-option>
              </el-option-group>
              
            </el-select>
            <el-select v-model="store.params.seriesId" placeholder="请选择车系" clearable filterable>
              <el-option v-for="(item,index) in store.seriesOptions" :key="item.seriesId"  :label="item.seriesName" :value="item.seriesId"></el-option>
            </el-select>
            <el-select v-model="store.params.modelId" placeholder="请选择车型" clearable filterable>
              <el-option v-for="(item,index) in store.modeOptions" :key="item.modelId"  :label="item.modelName" :value="item.modelId"></el-option>
            </el-select>
            <input type="hidden" name="brandId" v-model="store.params.brandId">
            <input type="hidden" name="seriesId" v-model="store.params.seriesId">
            <input type="hidden" name="modelId" v-model="store.params.modelId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="钥匙数量：" prop="carKeyNum" >
            <el-input placeholder="请输入内容" v-model="store.params.carKeyNum"  name="carKeyNum">
                <template slot="append">把</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="表显里程：" prop="carMileage">
            <el-input placeholder="请输入内容" v-model="store.params.carMileage" name="carMileage">
                <template slot="append">万公里</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="销售员工：" prop="saleUserId" required>
            <el-select v-model="store.params.saleUserId" placeholder="请选择销售人员" style="width:100%;" >
              <el-option v-for="(item,index) in store.userOptions" :key="item.userId"  :label="item.userName" :value="item.userId"></el-option>
            </el-select>
            <input type="hidden" name="saleUserId" v-model="store.params.saleUserId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24" :xl="12" >
          <el-form-item label="首次上牌："  :prop="store.params.carLicenceState == 1?'carLicenceDate':''" >
            <el-radio-group v-model="store.params.carLicenceState">
                <el-radio-button :label="1" name="carLicenceState">已上牌</el-radio-button>
                <el-radio-button :label="2" name="carLicenceState">未上牌</el-radio-button>
                <el-radio-button :label="3" name="carLicenceState">新车</el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="store.params.carLicenceDate"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择首次上牌日期"
                v-if="store.params.carLicenceState == 1"
                name="carLicenceDate"
                >
              </el-date-picker>
          </el-form-item>
        </el-col>
      </div>
      <div class="car-info-panel clearfix">
        <div class="car-info-title">定价信息</div>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="零售价：" prop="carRetailPrice">
              <el-input placeholder="价格面议请忽略此项" v-model="store.params.carRetailPrice" name="carRetailPrice">
                  <template slot="append">万元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="一口价：">
              <el-switch
                v-model="store.params.carFixedPriceState"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
              <input type="hidden" name="carFixedPriceState" v-model="store.params.carFixedPriceState">
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="特价车：">
              <el-switch
                v-model="store.params.carBargainPriceState"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
              <input type="hidden" name="carBargainPriceState" v-model="store.params.carBargainPriceState">
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="金融服务">
              <el-switch
                v-model="store.params.carFinanceService"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
              <input type="hidden" name="carFinanceService" v-model="store.params.carFinanceService">
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="延保服务">
              <el-switch
                v-model="store.params.carExtendedWarranty"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
              <input type="hidden" name="carExtendedWarranty" v-model="store.params.carExtendedWarranty">
            </el-form-item>
          </el-col>

      </div>
      <div class="car-info-panel clearfix">
        <div class="car-info-title">基本信息</div>
        <el-col :sm="24" :md="24" :lg="24" :xl="24" >
          <el-form-item label="宣传标题：" prop="carTitle">
            <el-input v-model="store.params.carTitle" placeholder="请输入内容" name="carTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="车 架 号：" prop="carVin">
            <el-input v-model="store.params.carVin" placeholder="请输入内容" name="carVin"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="车　　型："  prop="carTypeId" required>
            <el-select v-model="store.params.carTypeId" placeholder="请选择车身类型" clearable style="width:100%;">
              <el-option v-for="(item,index) in store.carBaseParamOptions.baseCarTypeOptions" :key="item.carTypeId"  :label="item.carTypeName" :value="item.carTypeId"></el-option>
            </el-select>
            <input type="hidden" name="carTypeId" v-model="store.params.carTypeId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="车 门 数：" prop="carDoorNum">
            <el-input placeholder="请输入内容" v-model="store.params.carDoorNum" name="carDoorNum">
                <template slot="append">个</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="燃料类型：" prop="carFuel" required>
            <el-select v-model="store.params.carFuel" placeholder="请选择燃料类型" clearable style="width:100%;" name="carFuel">
              <el-option v-for="item in store.carBaseParamOptions.baseCarFuelOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="24" :lg="16" :xl="12" >
          <el-col :sm="24" :md="12" :lg="12" :xl="12" >
            <el-form-item label="排　　量："  prop="carDisplacement" required>
              <el-input v-model="store.params.carDisplacement" placeholder="请输入内容" name="carDisplacement"> 
                <template slot="append">{{store.params.carInletModel}}</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="12" :xl="12" >
            <el-form-item label="涡轮增压：">
              <el-switch
                name="carInletModel"
                v-model="store.params.carInletModel"
                active-value="T"
                inactive-value="L">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="变 速 箱："  prop="carGearbox" required>
            <el-select v-model="store.params.carGearbox" placeholder="请选择变速箱" clearable style="width:100%;" name="carGearbox">
              <el-option v-for="item in store.carBaseParamOptions.baseCarGearboxOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="排放标准："  prop="carEnviron" required>
            <el-select v-model="store.params.carEnviron" placeholder="请选择排放标准" clearable style="width:100%;" name="carEnviron">
              <el-option v-for="item in store.carBaseParamOptions.baseCarEnvironOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="外观颜色：" prop="carOutColor" required >
            <el-select v-model="store.params.carOutColor" placeholder="请选择外观颜色" clearable style="width:100%;" name="carOutColor">
              <el-option v-for="item in store.carBaseParamOptions.baseCarOutColorOptions" :key="item.colorName" :label="item.colorName" :value="item.colorName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="内饰颜色："  prop="carInColor" required >
            <el-select v-model="store.params.carInColor" placeholder="请选择内饰颜色" clearable style="width:100%;" name="carInColor">
              <el-option v-for="item in store.carBaseParamOptions.baseCarInColorOptions" :key="item.colorName" :label="item.colorName" :value="item.colorName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="年审到期：" prop="carValidateDate">
            <el-date-picker v-model="store.params.carValidateDate" type="month" value-format="yyyy-MM" placeholder="请选择日期" style="width:100%;"  name="carValidateDate"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="交强险到期日：" prop="carForceInsuranceDate">
            <el-date-picker v-model="store.params.carForceInsuranceDate" type="month" value-format="yyyy-MM" placeholder="请选择日期" style="width:100%;"  name="carForceInsuranceDate"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="商业险到期日：" prop="carBusinessInsuranceDate">
            <el-date-picker v-model="store.params.carBusinessInsuranceDate" type="month" value-format="yyyy-MM" placeholder="请选择日期" style="width:100%;"  name="carBusinessInsuranceDate"></el-date-picker>
          </el-form-item>
        </el-col>
      </div>
      <div class="car-info-panel  clearfix">
        <div class="car-info-title">车辆描述</div>
        <el-form-item label="瑕疵描述：">
          <el-input type="textarea"  placeholder="请输入内容" v-model="store.params.carFlawDesc" name="carFlawDesc"></el-input>
        </el-form-item>
        <el-form-item label="按揭说明：">
          <el-input type="textarea" placeholder="请输入内容" v-model="store.params.carMortgageDesc" name="carMortgageDesc"></el-input>
        </el-form-item>
        <el-form-item label="卖点描述：">
          <el-input type="textarea" placeholder="请输入内容" v-model="store.params.carSellingPointDesc" name="carSellingPointDesc"></el-input>
        </el-form-item>
        <el-form-item label="4S店定期保养：">
          <el-radio-group v-model="store.params.car4sUpkeepState" name="car4sUpkeepState">
              <el-radio-button :label="1">是</el-radio-button>
              <el-radio-button :label="0">否</el-radio-button>
            </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
    <div class="car-info-panel">
        <div class="car-info-title">图片管理</div>
        <div class="img-box">
            <div :class="{isHover:item.imageUrl!=''}" class="el-upload el-upload--picture-card img-input-box" v-for="(item,index) in imgArr" :key="index">
              <div class="box-shade">
                <p class="box-img-title">{{item.imageKey | filterImageName}}</p>
                <p class="icon-box icon-scale" @click.prevent="showPreview(item)"></p>
                <p class="icon-box icon-delete" @click.prevent="deletePicture(index)"></p>
              </div>
              <p>{{item.imageKey | filterImageName}}</p>
              <img :src="imgUrl + item.imageUrl + '.r_300xh_300'" class="img-img" onerror="javascript:this.src=''">
              <input type="file" name="uploadFile" accept="image/*" class="img-input" @change="dealImg(item,$event)">
            </div>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog> 
        </div>

      </div>
  <div v-if="model">
    <div class="car-info-panel">
      <div class="car-info-title">基本参数</div>
      <el-form :inline="true"  label-width="120px" class="clearfix">
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="厂　　商：">{{ model.modelManufacturer || '--'}}</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="级　　别：">{{ model.carTypeName || '--'}}</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="发 动 机：">{{ model.modelEngineModel || '--'}}</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="变 速 箱：">{{ model.modelGearboxModality || '--'}}</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="车身结构：">{{ model.modelBodywork || '--'}}</el-form-item>
        </el-col>
      </el-form>
    </div>
    <div class="car-info-panel">
      <div class="car-info-title">车身</div>
      <el-form :inline="true"  label-width="120px" class="clearfix">
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="长　　度：">{{ model.modelLength || '--'}}mm</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="宽　　度：">{{ model.modelWidth || '--'}}mm</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="高　　度：">{{ model.modelHeight || '--'}}mm</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="轴　　距：">{{ model.modelWheelbase || '--'}}mm</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="车身结构：">{{ model.modelBody || '--'}}</el-form-item>
        </el-col>
      </el-form>
    </div>
    <div class="car-info-panel">
      <div class="car-info-title">发动机</div>
      <el-form :inline="true"  label-width="120px" class="clearfix">
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="发动机型号：">{{ model.modelEngineModel || '--'}}</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="排　　量：">{{ model.modelDisplacement || '--'}}</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="进气形式：">{{ model.modelInletModel || '--'}}</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="气缸排列形式：">{{ model.modelCylinderArray || '--'}}</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="气 缸 数：">{{ model.modelCylinderNum || '--'}}个</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="燃料形式：">{{ model.modelFuelRoz || '--'}}</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="环保标准：">{{ model.modelEnviron || '--'}}</el-form-item>
        </el-col>
      </el-form>
    </div>
    <div class="car-info-panel">
      <div class="car-info-title">变速箱</div>
      <el-form :inline="true"  label-width="120px" class="clearfix">
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="变速箱类型：">{{ model.modelGearboxModality || '--'}}</el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="挡位个数：">{{ model.modelGearNum || '--'}}</el-form-item>
        </el-col>
      </el-form>
    </div>
  </div>
  <el-checkbox-group v-model="confChecked">
      <div class="car-info-panel" v-for="item in conf">
        <div class="car-info-title">{{item.confName}}</div>
        <div class="clearfix" style="padding-left:40px;">
        <el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="ite in item.childCarConf" :key="ite.confId">
          <el-checkbox :label="ite.confId" name="carConfIds" :checked="ite.selectedState" style="margin-bottom:20px;" >{{ite.confName}}</el-checkbox>
        </el-col>
        </div>
      </div>
    </el-checkbox-group>
    <div class="footer">
      <mybutton :deal-function="save"></mybutton>
      <el-button size="small" @click.native="turnToCarList">取消</el-button>
    </div>
  </div>
</template>

<script>
  import '../../assets/css/carDetial.css'
  export default {
    data() {
      return {
        imgArr:[
          {imageUrl:'',imageKey:'left_anterior',imageSeq:1},
          {imageUrl:'',imageKey:'vin',imageSeq:2},
          {imageUrl:'',imageKey:'right_rear',imageSeq:3},
          {imageUrl:'',imageKey:'driving_seat',imageSeq:4},
          {imageUrl:'',imageKey:'control_booth',imageSeq:5},
          {imageUrl:'',imageKey:'odograph',imageSeq:6},
          {imageUrl:'',imageKey:'open_trunk',imageSeq:7},
          {imageUrl:'',imageKey:'engine_bay',imageSeq:8},
          {imageUrl:'',imageKey:'gear_lever',imageSeq:9},
          {imageUrl:'',imageKey:'tyre',imageSeq:10},
          {imageUrl:'',imageKey:'insurance',imageSeq:11},
          {imageUrl:'',imageKey:'registration_license',imageSeq:12},
          {imageUrl:'',imageKey:'vehicle_license',imageSeq:13}
          ],
        store:{
          marketOptions:[],
          shopOptions:[],
          brandOptions:[],
          userOptions:[],
          seriesOptions:[],
          modeOptions:[],
          regionOptions:[],
          carBaseParamOptions:{},
          params:{
            userId:"1",
            marketId:this.$marketId,
            shopId:null,
            regionId:null,
            brandId:null,
            seriesId:null,
            modelId:null,
            carLicenceState:1,
            car4sUpkeepState:0,
            carImageJson:[],
            carConfIds:[],
          }
        },
        rules: {
          marketId: [{
            required: true,
            message: '请选择所属市场',
            trigger: 'blur'
          }],
          shopId: [{
            required: true,
            message: '请选择所属车商',
            trigger: 'blur'
          }],
          modelId: [{
            required: true,
            message: '请选择品牌、车系、车型',
            trigger: 'blur'
          }],
          carKeyNum: [{
            required: true,
            pattern: /^[1-9]$/,
            message: '请填写正确的钥匙数量',
            trigger: 'change'
          }],
          carMileage: [{
            required: true,
            pattern: /^(0|[1-9][0-9]{0,2})(\.[0-9]{1,2})?$/,
            message: '请填写正确的表显里程',
            trigger: 'change'
          }],
          carLicenceDate: [{
            required: true,
            message: '请选择上牌日期',
            trigger: 'blur'
          }],
          carRetailPrice: [{
            required: true,
            pattern: /^(0|[1-9][0-9]{0,3})(\.[0-9]{1,2})?$/,
            message: '请填写正确的零售价',
            trigger: 'change'
          }],
          saleUserId: [{
            required: true,
            message: '请选择销售人员',
            trigger: 'blur'
          }],
          carVin: [{
            required: true,
            pattern: /^[0-9A-Za-z]{17}$/,
            message: '请输入正确的17位车架号',
            trigger: 'change'
          }],
          carTitle: [{
            required: true,
            message: '请填写车辆标题',
            trigger: 'blur'
          }],
          carTypeId: [{
            required: true,
            message: '请选择车型',
            trigger: 'blur'
          }],
          carDoorNum: [{
            required: true,
            pattern: /^[1-9]$/,
            message: '请填写正确车门数',
            trigger: 'change'
          }],
          carFuel: [{
            required: true,
            message: '请选择燃油类型',
            trigger: 'blur'
          }],
          carDisplacement: [{
            required: true,
            pattern: /^(0|[1-9][0-9]{0,1}\.[0-9])?$/,
            message: '请填写正确排量，例:2.0',
            trigger: 'change'
          }],
          carGearbox: [{
            required: true,
            message: '请选择变速箱类型',
            trigger: 'blur'
          }],
          carEnviron: [{
            required: true,
            message: '请选择排量标准',
            trigger: 'blur'
          }],
          carOutColor: [{
            required: true,
            message: '请选择外观颜色',
            trigger: 'blur'
          }],
          carInColor: [{
            required: true,
            message: '请选择内饰颜色',
            trigger: 'blur'
          }],
          carValidateDate: [{
            required: true,
            message: '请选择年审到期时间',
            trigger: 'blur'
          }],
          carFacotryDate: [{
            required: true,
            message: '请选择出厂日期',
            trigger: 'blur'
          }],
          carForceInsuranceDate: [{
            required: true,
            message: '请选择交强险到期时间',
            trigger: 'blur'
          }],
          carBusinessInsuranceDate: [{
            required: true,
            message: '请选择商业险到期时间',
            trigger: 'blur'
          }],
        },
        imgUrl:imageUrl,
        dialogImageUrl: '',
        fileList:[],
        dialogVisible: false,
        conf:[],
        confChecked:[],
        model:null,
      }
    },
    created(){
      this.$store.commit('getMarketOptions',this.store)
      this.$store.commit('getBrandsOptions',this.store)
      this.$store.commit('getBaseParamOptions',this.store);
    },
    watch:{
      'store.params.marketId'(){
        this.store.params.shopId = ''
        this.store.shopOptions = []
        this.$nextTick().then(()=>{
          this.$store.commit('getShopOptions',this.store);
          this.$store.commit('getRegionOptions',this.store);
        })
      },
      'store.params.brandId'(){
        this.store.params.seriesId = '';
        this.store.params.modelId = '';
        this.store.seriesOptions = []
        this.$nextTick().then(()=>{
          this.$store.commit('getSeriesOptions',this.store)
        })
      },
      'store.params.seriesId'(val){
        if(val){
          let obj = {};
          obj = this.store.seriesOptions.find((item)=>{
              return item.seriesId === val;
          });
          this.store.params.carTitle = obj.brand.brandName + ' ' + obj.seriesName + ' '
        }
        this.store.params.modelId = '';
        this.store.modeOptions = []
        this.$nextTick().then(()=>{
          this.$store.commit('getModeOptions',this.store)
        })
      },
      'store.params.modelId'(){
        this.$nextTick().then(()=>{
          this.getCarConf(this.store.params.modelId);
        })

      },
      'store.params.shopId'(){
        this.$nextTick().then(()=>{
          this.$store.commit('getUserOptions',this.store);
        })

      },
    },
    methods:{
      showPreview(item){
        this.dialogVisible = true;
        this.dialogImageUrl = this.imgUrl + item.imageUrl
      },
      init(){
        this.imgArr = [
          {imageUrl:'',imageKey:'left_anterior',imageSeq:1},
          {imageUrl:'',imageKey:'vin',imageSeq:2},
          {imageUrl:'',imageKey:'right_rear',imageSeq:3},
          {imageUrl:'',imageKey:'driving_seat',imageSeq:4},
          {imageUrl:'',imageKey:'control_booth',imageSeq:5},
          {imageUrl:'',imageKey:'odograph',imageSeq:6},
          {imageUrl:'',imageKey:'open_trunk',imageSeq:7},
          {imageUrl:'',imageKey:'engine_bay',imageSeq:8},
          {imageUrl:'',imageKey:'gear_lever',imageSeq:9},
          {imageUrl:'',imageKey:'tyre',imageSeq:10},
          {imageUrl:'',imageKey:'insurance',imageSeq:11},
          {imageUrl:'',imageKey:'registration_license',imageSeq:12},
          {imageUrl:'',imageKey:'vehicle_license',imageSeq:13}
          ];
      },
      deletePicture(index){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.imgArr[index].imageUrl = '';
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      dealImg(item,e){
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);
        const fromData = new FormData();
        fromData.append('uploadFile', file);
        reader.onload = ()=>{
            this.$axios.post('/controller/upload/uploadFile', fromData, {'Content-Type': 'multipart/form-data'})
              .then(res => {
                if (res.data.code === 0) {
                  this.$message({
                    type:'warning',
                    message:'上传失败'
                  })
                }else{
                  this.$message({
                    type:'success',
                    message:'上传成功'
                  });
                  item.imageUrl = res.data.result.pathUrl;
                }
              })
        }
      },
      handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
      },
      getCarConf(modelId){
        this.$axios.get(this.$api.getCarConfByModelId,{params: {'modelId': modelId}})
          .then((res)=>{
            this.conf = res.data.result;
          });
        this.$axios.get(this.$api.getModelInfoById,{params: {'modelId': modelId}})
          .then((res)=>{
            this.model = res.data.result[0];
            this.store.params.carTitle += this.model.modelName;
          })
      },
      handleBeforeRemove(file, fileList){
        return this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      },
      handleRemove(file, fileList) {
        this.fileList = fileList
      },
      handleSuccess(response, file, fileList){
        this.fileList = fileList
      },
      handleExceed(){
        this.$message({
          type: 'warning',
          message: '最多上传13张图片!'
        });
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 /1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      turnToCarList(){
        this.$router.push('/car');
      },
      save(){
        this.store.params.carConfIds = this.confChecked.join(',');
        this.store.params.carImageJson = JSON.stringify(this.imgArr)
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            console.log('通过');
            this.$axios.get(this.$api.insertCar,{params: this.store.params})
              .then((res)=>{
                 this.$router.push('/car')
              });
          }else{
            console.log('不通过');
          }
        })
      },

    },
    activated() {
      this.init();

      //   	this.$bus.$emit('showSort');
      //   	this.$bus.$on('sort', () => {
      // 	this.showForm = !this.showForm
      // });
    },
    deactivated() {
      // this.$bus.$emit('hideSort');
      // this.showForm = false;
      // this.$bus.$off('sort')
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .footer{
    width:auto ;
  }
  .img-box{
    padding:0 20px;
  }
</style>


















